<template>
  <div style="width:100%;">
    <van-nav-bar class="head-navbar"
                 @click-left="onClickLeft"
                 @click-right="onClickRight"
                 :title="title"
                 :right-text="rightText"
                 :border="false"
                 :style="{background: !bgColor ? `url(${bgImg})` :  bgColor,backgroundSize: `100% 100%`}"
                 :left-arrow="leftShow"
                 ref="headNavBar">
      <template #right>
        <slot name="right">

        </slot>
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
export default {
  props: {
    // 右侧文本
    rightText: {
      type: String,
      default: ''
    },
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 是否显示左侧返回
    leftShow: {
      type: Boolean,
      default: true
    },
    // 背景图片
    bgImg: {
      type: String,
      default: require('@/assets/image/navbar_bg.png')
    },
    // 背景颜色 优先于背景图片
    bgColor: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
    };
  },
  created () {


  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onClickRight () {
      this.$emit('rightClick')
    }
  }
}

</script>
<style lang='scss' scoped>
.head-navbar {
  width: 100%;
  @include header-top;
  ::v-deep .van-nav-bar__left .van-icon {
    color: #fff;
  }
  ::v-deep .van-nav-bar__title {
    color: #fff;
    font-size: 0.36rem;
  }
  ::v-deep .van-nav-bar__text {
    color: #fff;
    font-size: 0.28rem;
  }
}
</style>